<template>
	<view class="Com_picker">
		<uni-popup ref="Compopup" type="bottom" @change="Onchange">
			<view class="picker_bos">
				<viwe class="picker_bos--title">
					<view class="title_qx" @click="Oncancel">取消</view>
					<view class="title_xz">{{title}}</view>
					<view class="title_qd" @click="bindPickerChange">确定</view>
				</viwe>
				<view class="picker_box" v-if="pickerif">
					<picker-view :value="index" :indicator-style="indicatorStyle" @change="Onchangecity" class="picker-view">
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in arrayList" :key="index">{{item.title}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		props: {
			title: {
				type: String,
				default: '请选择'
			},
		},
		data() {
			return {
				pickerif: false, //异步
				arrayList: [], //数据
				indicatorStyle: `height: 100rpx;`,
				def: '', //默认
				index: [], //下标
			};
		},
		methods: {
			//修改地址格式
			Onutil() {
				if (this.def == '') {
					this.index = [0]
				} else {
					this.arrayList.forEach((item, index) => {
						if (item.id == this.def) {
							this.index = [index]
						}
					})
				}
				this.pickerif = true
			},
			//切换下拉
			Onchangecity(e) {
				let detail = e.detail
				this.index = detail.value
			},
			//点击确定
			bindPickerChange() {
				this.$refs.Compopup.close()
				this.def = this.arrayList[this.index].id
				this.$emit('Onreturn', this.arrayList[this.index])
			},
			//获取数据
			Ondata(e, def) {
				this.arrayList = e
				this.def = def
				this.Onutil()
			},
			//打开
			Onopen() {
				this.$refs.Compopup.open()
			},
			//取消
			Oncancel() {
				this.Onutil()
				this.$refs.Compopup.close()
			},
			Onchange(e) {
				if (!e.show) {
					this.Onutil()
				}
			},
		}
	}
</script>

<style>
	.picker_bos {
		height: 600rpx;
		width: 750rpx;
		background: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.picker_bos--title {
		width: 690rpx;
		height: 80rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.title_qx {
		color: #969696;
	}

	.title_qd {
		color: #6ccbb6;
	}

	.picker_box {
		height: 520rpx;
		width: 750rpx;
	}

	.picker-view {
		height: 520rpx;
		width: 750rpx;
	}

	.picker_item {
		width: 250rpx;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #323232;
	}
</style>
